<template>
  <vue-modal
    @submitData="checkComment"
    modalName="checkCommentModal"
    modalWidth="800"
    modalTitle="审核评论"
    ref="checkCommentModal">
      <div slot="content" class="form-box">
        <el-form ref="form" :model="form" label-width="80px">
          <div class="message-box">
            <h3 class="name-title">审核结果</h3>
            <p class="name-star">*</p>
          </div>
          <el-select class="input-select" v-model="form.checkResult" placeholder="请选择审核结果">
            <el-option
              v-for="item in checkResultStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <div class="message-box" v-if="form.checkResult === 2">
            <h3 class="description-title">回复评论</h3>
            <span :class="showCommentTip? 'description-tip showTip': 'description-tip'">长度不超过200个字符</span>
          </div>
          <el-input
            class="input-text"
            v-if="form.checkResult === 2"
            type="textarea"
            v-model="form.commentContent"
            :rows="3"
            maxlength="200"
            @focus="focusInputComment"
            @blur="blurInputComment"
          ></el-input>

          <div class="message-box" v-if="form.checkResult === 3">
            <h3 class="description-title">原因备注</h3>
            <span :class="showErrorTip? 'description-tip showTip': 'description-tip'">长度不超过200个字符</span>
            <p class="failure-star">*</p>
          </div>
          <el-input
            class="input-text"
            v-if="form.checkResult === 3"
            type="textarea"
            v-model="form.failureInfo"
            :rows="3"
            maxlength="200"
            @focus="focusInputError"
            @blur="blurInputError"
          ></el-input>

          <div class="message-box" v-if="form.checkResult === 2 || form.checkResult === 3">
            <h3 class="description-title">邮件操作</h3>
          </div>
          <el-checkbox
            v-model="form.needSendMail"
            :disabled="formerResult == form.checkResult"
            v-if="form.checkResult === 2 || form.checkResult === 3">发送邮件通知</el-checkbox>
        </el-form>
      </div>
  </vue-modal>
</template>

<script>
  import VueModal from 'components/common/modal/VueModal';

  import {checkComment, modifyCheck} from "../../../network/viewsRequest/comment";

  export default {
    name: "CheckCommentTemplate",
    data() {
      return {
        form: {
          commentId: 0,
          checkResult: null,
          commentContent: '',
          failureInfo: '',
          needSendMail: false
        },
        formerResult: null, // 回显数据时保存当时的审核结果
        updateFlag: false, // 更新操作的标记，如果本次的操作是审核评论，那么此值为false，如果是更新操作，那么此值为true
        checkResultStatus: [{
          value: 2,
          label: '审核通过',
        }, {
          value: 3,
          label: '审核失败'
        }],
        showCommentTip: false,
        showErrorTip: false,
      }
    },
    props: {
      commentFromParent: {
        type: Object,
        default: {}
      }
    },
    watch: {
      commentFromParent: {
        deep: true,
        handler(val) {
          this.form.commentId = this.$set(this.form, 'commentId', val.id);
          this.form.checkResult = this.$set(this.form, 'checkResult', val.commentStatus);
          this.form.commentContent = this.$set(this.form, 'commentContent', val.adminReply);
          this.form.failureInfo = this.$set(this.form, 'failureInfo', val.failureInfo);
          this.form.needSendMail = this.$set(this.form, 'needSendMail', false);
          this.updateFlag = true;
          this.formerResult = this.form.checkResult;
        }
      }
    },
    components: {
      VueModal
    },
    methods: {
      show(row) {
        this.form = {};
        this.formerResult = null;
        this.updateFlag = false;
        if (row != null) {
          this.form.commentId = row.id;
        }
        this.$refs.checkCommentModal.show();
      },
      focusInputComment() {
        this.showCommentTip = true;
      },
      blurInputComment() {
        this.showCommentTip = false;
      },
      focusInputError() {
        this.showErrorTip = true;
      },
      blurInputError() {
        this.showErrorTip = false;
      },
      /**
       * 审核评论的方法
       */
      checkComment() {

        if (this.form.checkResult == null) {
          this.$message.error("请选择审核结果");
          return;
        }

        // 在审核失败的情况下，要求输入审核失败的原因
        if (this.form.checkResult == 3 && (this.form.failureInfo == null || this.form.failureInfo.trim() == '')) {
          this.$message.error("请输入审核失败的原因");
          return;
        }

        // 如果needSendMail不存在，那么默认赋值为false，即不发送邮件
        if (this.form.needSendMail == null) {
          this.form.needSendMail = false;
        }
        let func = null;
        if (this.updateFlag) {
          func = modifyCheck;
        } else {
          func = checkComment;
        }

        func(this.form).then(res => {
          if (res.code == 1) {
            if (this.updateFlag) { // 修改
              this.$message({
                type: 'success',
                message: '审核信息修改成功'
              });
              // 关闭模态框
              this.$refs.checkCommentModal.closeModal();
              // 重新刷新表格
              this.$emit("loadTable");
            } else { // 新增
              if (res.data == 2) {
                this.$message({
                  type: 'success',
                  message: '该评论已审核通过'
                });
              } else {
                this.$message({
                  type: 'info',
                  message: '该评论已审核失败'
                });
              }
              // 关闭模态框
              this.$refs.checkCommentModal.closeModal();
              // 重新刷新表格
              this.$emit("loadTable");
              // 发送消息让navmenu更新数据
              this.$store.commit("getCommentForUnchecked");
            }

          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .message-box {
    position: relative;
  }
  .name-star,.failure-star {
    position: absolute;
    top: 0px;
    left: 75px;
    color: #F56C6C;
  }
  .message-box {
    margin-bottom: 10px;
  }
  .input-select {
    margin-bottom: 30px;
  }
  .input-text {
    margin-bottom: 30px;
  }

  .form-box {
    width: 500px;
    margin: 0 auto;
  }
  h3 {
    display: inline-block;
  }
  .name-tip,.description-tip,.sort-tip,.category-tip {
    margin-left: 20px;
    color: #F56C6C;
    visibility: hidden;
  }
  .message-box .showTip {
    visibility: visible;
  }

</style>